<script>
import { ArrowRightBold } from '@element-plus/icons-vue'
import { routes } from '@/router/index'

export default {
  data () {

    // 用来记录所有路由的 name 对应的 label
    // Map 也是一个对象，该对象中有 key 和 value
    // 可以根据 key 然后获取到 value
    this.routesMap = new Map()
    // 用来将路由处理成 map
    this.initRoutesMap(routes)

    // console.log(this.routesMap);

    return {
      icon: 'ArrowRightBold',
      list: []
    }
  },
  methods: {
    initRoutesMap (routes) {
      routes.forEach(route => {
        // console.log(route);
        this.routesMap.set(route.name, route.label)
        // 如果有子路由
        if (route.children) {
          this.initRoutesMap(route.children)
        }
      })
    }
  },
  mounted () {
    // this.$router 用于页面路由跳转的对象，其内部有各种跳转路由的函数
    // this.$route 用于获取当前页面路由路径和路由配置用的,还有路由传参的内容
    // console.log(this.$route);
  },
  watch: {
    $route: {
      immediate: true,
      handler (route) {
        // console.log('11111', route);
        // route.matched 可以获取到路径中的一级，二级，三级路由路径
        this.list = route.matched.map(item => {
          // 通过路由路径获取到 label
          // 根据 name 属性获取到 label
          // [
          //   {
          //     name: 'home',
          //     label: '首页'
          //   }
          // ]
          return {
            name: item.name,
            label: this.routesMap.get(item.name)
          }
        })

        // console.log(this.list);
      }
    }
  },
  components: {
    ArrowRightBold
  }
}
</script>
<template>
  <!-- <el-breadcrumb :separator-icon="icon"> -->
  <el-breadcrumb separator=">">
    <el-breadcrumb-item v-for="item in list" :key="item.name" :to="{ name: item.name }">{{ item.label
    }}</el-breadcrumb-item>
    <!-- <el-breadcrumb-item>promotion management</el-breadcrumb-item>
                      <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                      <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
  </el-breadcrumb>
</template>
<style lang="scss" scoped>
.el-breadcrumb {
  margin-bottom: 20px;
}
</style>
